<template>
  <div class="box">
    <aside-box>
      <template #zh> 进度图 </template>
      <template #en> progress chart </template>
      <div class="progress" ref="progressRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";
const option = {
  grid: {
    left: "2%",
    top: "1%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: [
    {
      show: false,
    },
  ],
  yAxis: [
    {
      axisTick: "none",
      axisLine: "none",
      offset: "7",
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      data: [
        "京港澳高速公路",
        "沪昆高速公路",
        "沈海高速公路",
        "大广高速公路",
        "京沪高速公路",
      ],
    },
    {
      axisTick: "none",
      axisLine: "none",
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      data: [1514, 1619, 1623, 1968, 2158],
    },
    {
      name: "单位：件",
      nameGap: "50",
      nameTextStyle: {
        color: "#fff",
        fontSize: 12,
        fontFamily: "阿里妈妈数黑体 Bold",
      },
      axisLine: {
        lineStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
      data: [],
    },
  ],
  series: [
    {
      name: "条",
      type: "bar",
      yAxisIndex: 0,
      data: [25, 30, 34, 40, 43],
      label: {
        normal: {
          show: true,
          position: "right",
          formatter: function (param: any) {
            return param.value + "%";
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontFamily: "阿里妈妈数黑体 Bold",
          },
        },
      },
      barWidth: 11,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "#03c893",
            },
            {
              offset: 1,
              color: "#0091ff",
            },
          ]),
          barBorderRadius: 15,
        },
      },
      z: 2,
    },
    {
      name: "白框",
      type: "bar",
      yAxisIndex: 1,
      barGap: "-100%",
      data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
      barWidth: 12,
      itemStyle: {
        normal: {
          color: "rgba(0,0,0,.2)",
          barBorderRadius: 15,
        },
      },
      z: 1,
    },
  ],
};

const [progressRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .progress {
    width: 100%;
    height: 200px;
  }
}
</style>